<template>
  <div @click="onClick" style="text-align:center">
    <div>
      <img style="width:24px" :src="index===SelectIndex?element.iconactive:element.icon" />
    </div>
    <div>
      <div :class="index===SelectIndex?'title_active':'title'">{{element.title}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
    },
    index: Number,
    SelectIndex:Number
  },
  data() {
    return {
      element: this.item,
    };
  },
  methods:{
      onClick(){
          this.$router.push(this.element.path)
          this.$emit("change",this.index)
      }
  }
};
</script>

<style scoped>
.title
{
    color:black;
    font-size: 14px;
}
.title_active
{
    color:red;
    font-size: 14px;
}
</style>